{extend name='layout' /}

{block name='title'}
{$art['title']} | Sinalma博客
{/block}

{block name='subtitle'}
{$art['categories']}
{/block}

{block name="subtitleslug"}index{/block}

{block name="subtitlehref"}
https://www.sinalma.cn/category/{$art['cslug']}
{/block}

{block name="css"}
<link rel="stylesheet" href="__HTP____URL__/public/static/css/article.css">
{/block}

{block name='content'}
<article class="post preview" itemscope="" itemtype="http://schema.org/BlogPosting">
    <h1 class="post-title" itemprop="name headline">
        <a itemtype="url" href="__HTP____URL__/article/{$art['slug']}.html" title="">{$art['title']}</a>
    </h1>
    <ul class="post-meta clearfix">
        <li itemprop="author" itemscope="" itemtype="http://schema.org/Person">
            <i class="glyphicon glyphicon-user"></i> 
            <a itemprop="name" href="__HTP____URL__/author/{$art['author']}.html" rel="author">{$art['author']}</a>
        </li>
        <li>
            <i class="glyphicon glyphicon-book"></i> 
            <a href="__HTP____URL__/category/{$art['cslug']}.html">{$art['categories']}</a>
        </li>
        <li>
            <i class="glyphicon glyphicon-time"></i>
            <time datetime="{$art['created']|date="Y-m-d H:m:s",###}" itemprop="datePublished">
            {$art['created']|date="Y-m-d",###}</time>
        </li>
        <li>阅读:({$art['order']})</li>
        <li class="post-qrcode">
            <i class="glyphicon glyphicon-qrcode"></i>
                <div id="qrcode-img">
                    <!-- <canvas width="96" height="96" style="display: none;"></canvas> -->
                    <img alt="Scan me!" src="{$qrcode}" style="display: none;">
                </div>
        </li>
    </ul>
    <div class="post-content" id="post-content" itemprop="articleBody">
        <div id="md_content_2" class="md_content markdown-body editormd-html-preview" style="min-height: 50px;">
            {$text}
        <!-- 文本 --> 
        </div>
    </div>    
    <div class="post-footer">
        <section class="author">
            <div class="author-ava">
                <img src="__HTP____URL__/public/static/images/profile.jpg">
            </div>
            <p>Stay simple,stay navie.</p>
            <p itemprop="keywords" class="tags">标签:
                {foreach $art['tags'] as $tag}
                <a href="__HTP____URL__/tag/{$tag.slug}">{$tag.name}</a>
                {/foreach}
            </p>
        </section>
    </div>      
</article>
<ul class="post-near">
<li>上一篇: 
    {if $lastArt['slug']}<a href="{$lastArt['slug']}">{/if}{$lastArt['title']}</a></li>
<li>下一篇: {if $nextArt.slug}<a href="{$nextArt['slug']}">{/if}{$nextArt['title']}{if $nextArt.slug}</a>{/if}</li>
</ul>
<div id="comments">
    <section id="isso-thread" data-title="让 sudo 继承 .zshrc 或 .bashrc 中定义的 alias" data-isso-id="https://www.gaojinan.com/pass-alias-to-sudo-shell.html">
        <h4>1条评论</h4>
        <div class="isso-postbox">
            <div class="form-wrapper">
                <div class="textarea-wrapper">
                    <div contenteditable="true" class="textarea placeholder" onclick="textareaFocus(0)">在此输入评论，审核通过后即会显示，请勿重复提交(最少3个字符)
                    </div>
                </div>
                <section class="auth-section">
                    <p class="input-wrapper">
                        <input type="text" name="author" placeholder="昵称" value="">
                    </p>
                    <p class="input-wrapper">
                        <input type="email" name="email" placeholder="E-mail" value="">
                    </p>
                    <p class="input-wrapper">
                        <input type="text" name="website" placeholder="网站 (可选)" value="">
                    </p>
                    <p class="post-action">
                        <input type="submit" value="提交"  onclick="submitCmt(0)">
                    </p>
                </section>
            </div>
        </div>
        {include file="common/spinner" /}
        <div id="cmt-container">
            <h4 class="cmt-none" style="text-align: center;mrgin:50px 0 50px 0;display: none;">暂无评论，快来抢沙发</h4>
        </div>
    </section>
</div>
<script type="text/javascript">
    $(function(){
        // 结束加载动画
        loadSuccess();
        // 删除文章页面加载动画标签，便于评论动画的处理
        $('.main > .spinner').remove();
        // 监听内容滚动
        var conH = $('body').height();
        var scrH = document.body.scrollWidth;
        var state = 1;// 是否加载的状态 1 表示加载评论数据,0表示不加载
        // 屏幕高度和文档总高度相近,加载评论
        if (Math.abs(conH-scrH)) {
                state = 0;
                requestCmts();
        }
        // 当滚动快到底部，加载评论
        $(window).scroll(function(){
            var top = $(document).scrollTop();
            // 判断用户是否将要看到文章底部
            if (top >= scrH-conH && state==1){
                state = 0;
                requestCmts();
            }
        });
    });


    /*
     * 请求评论数据   
     */
    function requestCmts()
    {
        // 显示评论加载动画
        $('.spinner').css('display','block');
        $.ajax({
            url:'__HTP____URL__/api/comment/{$art["cid"]}/1',
            type:'get',
            success:function(res){
            $('.spinner').css('display','none');
                if (res.length <= 0) {
                    $('.cmt-none').css('display','block');
                }
                showCmts(res);
            },
            error:function(msg){
                alert('评论加载失败');
            }
        });
    }

    // 构建评论html
    function showCmts(cmts) {
        // 统计评论总数
        num = cmts.length;
        for(var i=0;i<cmts.length;i++){
            num += cmts[i].subcmts.length;
        }
        $('#isso-thread > h4').html(num+'条评论');

        var strs = new Array();
        for (var i = 0;i < cmts.length; i++) {
            cmt = cmts[i];
            strs.push(makeCmtHtml(cmt));
        }
        strs = strs.join("");
        $('#cmt-container').append(strs);
        $('.cmt').fadeIn('slow');
    }

    // 构建每条评论的htmml字符串
    function makeCmtHtml(cmt){
        var strs = new Array();
        strs.push('<div cmtid='+cmt.id+' class="cmt" style="display:none;">');
            strs.push("<div class='avatar'><img src='"+cmt.pic+"'></div>");
            strs.push('<div class="cmt-wrapper">');
                strs.push("<div role='meta' class='cmt-header'><span class='author'>"+cmt.name+"</span><span class='spacer'>•</span><time title='Sat Aug 18 2018 16:05:05 GMT+0800 (中国标准时间)' datetime='2018-07-06T08:05:05Z'>"+cmt.created+"</time><span class='note'></span></div>");
                // 如果是子评论，默认加上回复的评论用户名
                text = cmt.cmt_name.length >= 3 ? '@'+cmt.cmt_name+':'+cmt.text : cmt.text;
                strs.push("<div class='text'><p>"+text+"</p></div>");
                submitId = cmt.parent_id == 0 ? cmt.id : cmt.parent_id;
                strs.push("<div class='cmt-footer'><a href='javascript:showCmtBox("+cmt.id+","+submitId+")' class='reply'>回复</a></div>");
                strs.push("<div class='sub-cmt-container'>");
                // 递归创建子评论
                if (cmt.subcmts) {
                    for (var i=0;i<cmt.subcmts.length;i++){
                        substr = makeCmtHtml(cmt.subcmts[i]);
                        strs.push(substr);
                    }
                }
                strs.push("</div>"); // .sub-cmt-container
            strs.push('</div>'); // .cmt-wrapper
        strs.push('</div>'); // .cmt
        strs = strs.join("");
        return strs;
    }



    /*
     * 显示指定评论回复框
     * $id -> 评论id，用于显示回复框和获取回复框内容
     * pid 评论需要加到的id下，如果是0，就是根评论
     *     如果是顶级评论 id和pid是当前评论的id
     *     如果是子评论，id是当前评论的id，pd是根评论的id
    */
    function showCmtBox(id,pid){
        // 处理连续点击回复
        if($(".cmt[cmtid='"+id+"'] > .cmt-wrapper > .isso-postbox").length){
            $('.cmt[cmtid='+id+'] > .cmt-wrapper > .cmt-footer > .reply').html('回复');
            $(".cmt[cmtid='"+id+"'] > .cmt-wrapper > .isso-postbox").remove();
            return;
        }
        var boxStr = new Array();
        boxStr.push('<div class="isso-postbox">');
            boxStr.push('<div class="textarea-wrapper">');
                boxStr.push('<div contenteditable="true" class="textarea placeholder" onclick="textareaFocus('+id+')">在此输入评论，审核通过后即会显示，请勿重复提交(最少3个字符)</div>');
                boxStr.push('<section class="auth-section">');
                    boxStr.push('<p class="input-wrapper">');
                        boxStr.push('<input type="text" name="author" placeholder="昵称" value="">');
                    boxStr.push('</p>');
                    boxStr.push('<p class="input-wrapper">');
                        boxStr.push('<input type="email" name="email" placeholder="E-mail" value="">');
                    boxStr.push('</p>');
                    boxStr.push('<p class="input-wrapper">');
                        boxStr.push('<input type="text" name="website" placeholder="网站 (可选)" value="">');
                    boxStr.push('</p>');
                    boxStr.push('<p class="post-action">');
                        boxStr.push('<input type="submit" value="提交"  onclick="submitCmt('+id+','+pid+')">');
                    boxStr.push('</p>');
                boxStr.push('</section>');
            boxStr.push('</div>');      
        boxStr.push('</div>');//isso-postbox
        $('.cmt[cmtid='+id+'] > .cmt-wrapper >.sub-cmt-container').before(boxStr.join(""));
        $('.cmt[cmtid='+id+'] > .cmt-wrapper > .cmt-footer > .reply').html('关闭');

    }

    /*
     * 评论文本框的聚焦
     */
    function textareaFocus(id){
        var textarea;
        if (id == 0) {
            textarea = $('#isso-thread > .isso-postbox .textarea').removeClass('placeholder');
        }else{
            textarea = $('.cmt[cmtid='+id+'] > .cmt-wrapper > .isso-postbox > .textarea-wrapper > .textarea');
        }
        textarea.removeClass('placeholder');
        textarea.html('');
    }

    // 评论内容文本框的对焦与失焦
    // $('.textarea').focus(function(){
    //     $('.textarea').removeClass('placeholder');
    //     $('.textarea').html('');
    // });
    $('.textarea').blur(function(){
        return;
        $('.textarea').html('在此输入评论，审核通过后即会显示，请勿重复提交(最少3个字符)');
        var areas = $('.textarea');
        for (var i = areas.length - 1; i >= 0; i--) {
            area = areas[i];
                area.html('在此输入评论，审核通过后即会显示，请勿重复提交(最少3个字符)');
            if (area.html().length <= 0) {
            }else{

            }
        }
        $('.textarea').addClass('placeholder');
        // $('.textarea').html('在此输入评论，审核通过后即会显示，请勿重复提交(最少3个字符)');
    });

    // 清除指定评论中的回复框内容
    function clearInput(id){
        $('.reply').html('回复');
        if (id == 0) {
            $('.textarea').html('在此输入评论，审核通过后即会显示，请勿重复提交(最少3个字符)');
            $('.textarea').addClass('placeholder');
            $('input').val('');
        }else{
            textarea = $('.cmt[cmtid='+id+'] .cmt-wrapper > .isso-postbox').remove();
        }
    }

    /**
     * 提交评论(传入所评论的id)
     * id 如果为根评论,传入0,否则传入回复某条评论的id
     */
    function submitCmt(id,pid){
        var textarea;
        if (id == 0) {
            textarea = $('#isso-thread > .isso-postbox .textarea');
        }else{
            textarea = $('.cmt[cmtid='+id+'] .cmt-wrapper > .isso-postbox > .textarea-wrapper > .textarea');
        }
        text = textarea.html();

        if (text.length < 3) {
            $.hulla.send("请至少输入三个字符的评论内容！", "warning");
            return;
        }

        var name,email,website,cmt_name;
        if (id == 0) {
            name = $('input[name=author]').val();
            email = $('input[name=email]').val();
            website = $('input[name=website]').val();
        }else{

            name = $('.cmt[cmtid='+id+'] .cmt-wrapper > .isso-postbox input[name=author]').val();
            email = $('.cmt[cmtid='+id+'] .cmt-wrapper > .isso-postbox input[name=email]').val();
            website = $('.cmt[cmtid='+id+'] .cmt-wrapper > .isso-postbox input[name=website]').val();
            cmt_name = id!=pid ? $('.cmt[cmtid='+id+'] .cmt-wrapper > .cmt-header >.author').html() : "";
        }
        if (name.length <= 2) {
            $.hulla.send("请输入昵称，至少三个字符", "warning");
            return;
        }
        
        // 校验输入单独内容是否合法
        var data = {parent_id:pid,name:name,cmt_name:cmt_name,email:email,website:website,text:text};
        $.ajax({
            url:'__HTP____URL__/api/comment/{$art["cid"]}',
            type:'post',
            data:data,
            success:function(res){
                clearInput(id);
                $.hulla.send('评论成功', "success");
                // 添加最新留言到当前页面
                cmtStr = makeCmtHtml(res);
                if (res.parent_id == 0) {
                    $('#cmt-container').prepend(cmtStr);
                }else{

                    $('.cmt[cmtid='+pid+'] > .cmt-wrapper > .sub-cmt-container').prepend(cmtStr);
                    
                }
                $('.cmt[cmtid='+res.id+']').fadeIn('slow');
            },
            error:function(msg,status){
                $.hulla.send(status+':评论提交失败，请检查内容，或重新提交--->'+msg, "warning");
            }
        });
    }

    // 二维码的显示/隐藏
    $('.post-qrcode').mouseover(function(){
        $('#qrcode-img>img').fadeIn('slow');
    });
    $('.post-qrcode').mouseout(function(){
        $('#qrcode-img>img').fadeOut('slow');
    });


</script>
{/block}